<template>
	<view class="mobile-item-container gradient-background">
		<Navbar title="" bgColor="transparent" :h5Show="false"></Navbar>
		<u-tabs :activeStyle="activeStyle" :list="tabs" @change="tabChange"></u-tabs>
		<view style="padding: 16px 0 10px;">
			<u-search v-model="params.english" @custom = "searchData()" @search="searchData()" @clear="searchData()" :show-action="true" actionText="搜索" :animation="true" shape="square" height="40px"></u-search>
		</view>
		<u-list height="auto" style="margin-top: 10px;" key="activeKey" @scrolltolower="scrolltolower">
			<u-list-item v-for="(item, index) in list" :key="index">
				<view style="display: flex; align-items: center;">
					<b @click="toDetail(item)" style="padding-right: 10px;">{{`${index + 1}-${item.english}`}}</b>
					<u--text type="info" size="12" :text="item.phoneticSymbol"></u--text>
					<PlayAudio :path="item.voiceFilesPath" size="14px"></PlayAudio>
				</view>
				<view style="display: flex; align-items: center;margin-top: 5px;">
					<view style="color: #9093b3;padding-right: 10px;font-size: 10px;">{{item.partOfSpeech}}</view>
					<u--text blod size="14" :text="item.chinese"></u--text>
				</view>
				<!-- 添加虚线 -->
				<u-line style="padding-top: 10px;padding-bottom: 10px;" color="#3f3f3f" dashed></u-line>
			</u-list-item>
		</u-list>
		<u-back-top :scroll-top="scrollTop"></u-back-top>

	</view>
</template>


<script>
	import * as IndexApi from '@/api/index'
	import Navbar from '@/components/navbar/Navbar'
	import PlayAudio from './playAudio'

	export default {
		components: {
			Navbar,
			PlayAudio,
		},
		data() {
			return {
				scrollTop: 0,
				tabs: [{
					name: '未学单词',
					key: 3,
					badge: {
						value: 19,
					}
				}, {
					name: '已学单词',
					key: 2,
					badge: {
						bgColor: "#00ff00",
						value: 2,
					}
				}, {
					name: '全部',
					key: 1,
					badge: {
						bgColor: "#5500ff",
						value: 21,
					}
				}],
				params: {
					english: '',
					courseId: null,
					type: 3,
					pageNum: 0,
					pageSize: 15
				},
				endSize: false,
				list: [],
				activeStyle: {
					color: '#303133',
					fontSize: '20px',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}
			}
		},
		created() {
		},
		onLoad(params) {
			this.params.courseId = params.id;
			IndexApi.selectCourseBinding().then(res => {
				this.tabs[0].badge.value = res.data.notLearned;
				this.tabs[1].badge.value = res.data.learned;
				this.tabs[2].badge.value = res.data.totalNum;
			})
			this.loadData()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			// 加载通知公告数据
			loadData() {
				if(this.endSize){
					return;
				}
				this.params.pageNum += 1;
				IndexApi.learningMaterialsList(this.params).then(res => {
					this.endSize = this.params.pageSize * this.params.pageNum >= res.total;
					console.log("res.rows=======", res.rows);
					this.list = this.list.concat(res.rows);
				})
			},
			tabChange(item) {
				this.params.english = '';
				this.params.type = item.key;
				this.params.pageNum = 0;
				this.endSize = false;
				this.list = [];
				this.loadData();
			},
			searchData(){
				this.params.pageNum = 0;
				this.list = [];
				this.endSize = false;
				this.loadData();
			},
			toDetail(item) {
				uni.navigateTo({
					url: '/pages/index/info?id=' + item.id
				})
			},
			// 滚动分页加载数据
			scrolltolower() {
				console.log("------23123213");
				this.loadData()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.notice-item-tips {
		border-radius: 8px;
		background-color: #f4f4f5;
		padding: 9px 16px;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}
</style>